<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/templates/layout.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">
        <p>Here goes your view-specific content.</p>
        <p>#{page100Controller.welcomeMessage()}</p>
        <p:panel id="panel1">
            <h3>p:commandButton mit Non-Ajax (Form) Submit</h3>
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputLabel value="h:outputText {viewModel.someText}" />
                <h:outputText value="p:inputText {viewModel.someText}" />
                <h:outputText value="#{page100Controller.page100Rvm.someText}" />
                <p:inputText value="#{page100Controller.page100Rvm.someText}" />
                <p:commandButton value="Non-Ajax Submit" 
                                 actionListener="#{page100Controller.submit()}" 
                                 ajax="false" 
                                 onstart="document.forms['searchForm'].submit()"/>
            </h:panelGrid>
        </p:panel>

        <p:panel id="panel2">
            <h3>p:commandButton mit Ajax Submit</h3>
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputLabel value="h:outputText {viewModel.someText2}" />
                <h:outputText value="p:inputText {viewModel.someText2}" />
                <h:outputText value="#{page100Controller.page100Rvm.someText2}" />
                <p:inputText value="#{page100Controller.page100Rvm.someText2}" />
                <p:commandButton value="Ajax Submit" 
                                 update="panel2, :footerForm:footerInfo"
                                 ajax="true" 
                                 actionListener="#{page100Controller.submit()}"/>
            </h:panelGrid>
        </p:panel>


        <p:panel id="panel3">
            <h3>Theme switcher</h3>
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputText value="switch to:" />  
                <p:themeSwitcher id="themeSwitcherID" style="width:200px" >  
                    <f:selectItem itemValue="#{themeSwitcherSvm.preferredTheme}" />
                    <f:selectItems value="#{themeSwitcherSvm.selectableThemes}" 
                                   var="t"
                                   itemLabel="#{t.name}"
                                   itemValue="#{t.key}"/>  
                    <p:ajax global="false" listener="#{themeSwitcherSvm.saveTheme}" />
                </p:themeSwitcher>
            </h:panelGrid>

        </p:panel> 


        <p:panel id="panel4">
            <h3>SelectOneMenu Example</h3>
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputText value="switch to:" />  
                <p:selectOneMenu id="advanced1" value="#{themeSwitcherSvm.preferredTheme}"  
                                 effect="fade" var="t" style="width:200px">
                    <p:ajax listener="#{themeSwitcherSvm.onThemeChange}" update="themeSwitchedID" />
                    <f:selectItems value="#{themeSwitcherSvm.selectableThemes}" 
                                   var="t" 
                                   itemLabel="#{t.name}" 
                                   itemValue="#{t.key}" />
                </p:selectOneMenu>  
                <h:outputText value="theme was switched to:" />  
                <h:outputText id="themeSwitchedID" value="#{themeSwitcherSvm.preferredTheme}" />
            </h:panelGrid>
        </p:panel>  

    </ui:define>
</ui:composition>